<script setup>
import {inject, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const $http = inject("$axios");

const user = reactive({
  userId:"",
  name:"",
  password:"",
  sex:"",
  age:"",
  phone:"",
  email:"",
  job:""
});
//设定输入规则
const rules = reactive({
  userId: [
    { required: true, message: '请首先输入用户名', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请首先输入密码',
      trigger: 'blur',
    }
  ],
});

function submit() {
  $http.post("http://localhost:8088/api/user/createUser",user)
      .then(res => {
        let userInf = res.data;
        console.log(userInf);
        if (userInf == '' || userInf == null || userInf == undefined) {
          ElMessage.error('注册失败！');
        } else {
          ElMessage.success('注册成功！');
          router.push({ path: '/' });
        }
      }).catch(err => {
    ElMessage.error('注册失败！');
  })
}

function goToLogin() {
  router.push({ path: '/' });
}
</script>

<template>
  <div class="register">
    <h1>注册界面</h1>
    <el-form :model="user" :rules="rules" label-width="auto">
      <el-form-item label="用户名" prop="userId">
        <el-input v-model="user.userId" placeholder="请输入你的用户名"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="user.name" placeholder="请输入你的姓名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password" placeholder="请输入你的密码" type="password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="user.sex" placeholder="请输入你的性别,false为女性，true为男性"/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="user.age" placeholder="请输入你的年龄"/>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="user.phone" placeholder="请输入你的电话"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email" placeholder="请输入你的邮箱"/>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="user.job" placeholder="请输入你的职位"/>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit">提交</el-button>
    <el-button type="primary" @click="goToLogin">返回登录页面</el-button>
  </div>
</template>

<style scoped>

</style>